<!Doctype html>  
<html xmlns=http://www.w3.org/1999/xhtml>  
    <head>  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">  
    <title>标签</title>  
      <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->  
    <script type="text/javascript">  
        mxBasePath = 'mxgraph2';  
    </script>  
    <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->  
    <!-- 引入支持库文件 -->  
    <script type="text/javascript" src="mxgraph2/js/mxClient3.js"></script>  
    <!-- 示例代码 -->  
    <script type="text/javascript">  
//程序在此启动  
        function main(container)  
        {  
            // 检测浏览器兼容性  
            if (!mxClient.isBrowserSupported())  
            {  
                mxUtils.error('Browser is not supported!', 200, false);  
            }  
            else  
            {  
                // 修正不同浏览器的裁剪方式  
                mxClient.NO_FO = mxClient.NO_FO || mxClient.IS_SF || mxClient.IS_GC;  
                  
                // 在容器中创建图形  
                var graph = new mxGraph(container);  
                graph.setTooltips(true);  
                graph.htmlLabels = true;  
                graph.vertexLabelsMovable = true;  
                new mxRubberband(graph);  
                new mxKeyHandler(graph);  
                  
                graph.isCellLocked = function(cell)  
                {  
                    return this.isCellsLocked();  
                };  
                  
                graph.isCellResizable = function(cell)  
                {  
                    var geo = this.model.getGeometry(cell);  
                      
                    return geo == null || !geo.relative;  
                };  
                  
                // 截去的标签内多余的文字（只显示标签宽度内的文字）  
                graph.getLabel = function(cell)  
                {  
                    var label = (this.labelsVisible) ? this.convertValueToString(cell) : '';  
                    var geometry = this.model.getGeometry(cell);  
                      
                    if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||  
                        (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&  
                        geometry.width >= 2)  
                    {  
                        var style = this.getCellStyle(cell);  
                        var fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;  
                        var max = geometry.width / (fontSize * 0.625);  
                          
                        if (max < label.length)  
                        {  
                            return label.substring(0, max) + '...';  
                        }  
                    }  
                      
                    return label;  
                };  
                  
                // 是否折叠  
                graph.isWrapping = function(cell)  
                {  
                    return this.model.isCollapsed(cell);  
                };  
                  
                // 标签是否被裁剪  
                graph.isLabelClipped = function(cell)  
                {  
                    var geometry = this.model.getGeometry(cell);  
                      
                    return geometry != null && !geometry.relative && (geometry.offset == null ||  
                        (geometry.offset.x == 0 && geometry.offset.y == 0));  
                };  
                  
                // 创建默认窗体  
                var parent = graph.getDefaultParent();  
                                  
                // 开启更新事务  
                graph.getModel().beginUpdate();  
                try  
                {  
                    var v1 = graph.insertVertex(parent, null, 'vertexLabelsMovable', 20, 20, 80, 30);  
  
                    // 子标签的顶点  
                    var label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true);  
                    var label12 = graph.insertVertex(v1, null, 'Label2', 0.5, 0, 0, 0, null, true);  
                      
                    var v2 = graph.insertVertex(parent, null, 'Wrapping and clipping is enabled only if the cell is collapsed, otherwise the label is truncated if there is no manual offset.', 200, 150, 80, 30);  
                    v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);  
                    var e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);  
  
                    // 子标签的顶点  
                    var label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true);  
                    var label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true);  
                }  
                finally  
                {  
                    // 更新事务结束  
                    graph.getModel().endUpdate();  
                }  
            }  
        };  
    </script>  
</head>  
  
<!-- 页面载入时启动程序 -->  
<body onload="main(document.getElementById('graphContainer'))">  
  
    <!-- 创建带网格壁纸和曲线的一个容器  -->  
    <div id="graphContainer"  
        style="position:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;background:url('mxgraph2/editors/images/grid.gif')">  
    </div>  
</body>  
</html>  